<!--
 * @Author: dty 15140264051@139.com
 * @Date: 2022-08-17 10:59:37
 * @LastEditors: dty 15140264051@139.com
 * @LastEditTime: 2022-09-16 13:56:58
 * @FilePath: \famfrontend\src\page\index\sidebar\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div  class="avue-sidebar">
    <!-- <logo></logo> -->
    <el-scrollbar style="height:100%">
<!--      <div v-if="validatenull(menu)"-->
<!--           class="avue-sidebar&#45;&#45;tip">{{$t('menuTip')}}-->
<!--      </div>-->
      <el-menu unique-opened
               :default-active="nowTagValue"
               mode="vertical"
               :show-timeout="200"
               :collapse="keyCollapse"
               background-color="#ffffff"
               text-color="#636c86"
               active-text-color="#2878e8"
               @select="menuSelect">
        <sidebar-item :menu="menuList"
                      :screen="screen"
                      first
                      :props="website.menu.props"
                      :collapse="keyCollapse"
                      ref="sidebarItem"></sidebar-item>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import logo from "../logo";
  import sidebarItem from "./sidebarItem";

  export default {
    name: "sidebar",
    components: {sidebarItem, logo},
    inject: ["index"],
    data() {
      return {
        menuList:[],
      };
    },
    created() {
      this.index.openMenu();
      // console.log("sidebar-menu",this.menu)
    },
    computed: {
      ...mapGetters(["website", "menu", "tag", "keyCollapse", "screen", "menuId"]),
      nowTagValue: function () {
        return this.$router.$avueRouter.getValue(this.$route);
      }
    },
    watch: {
      menu(val){
        let menuArr=this.menu
        // if(menuArr[0].name=="首页"){
        //   menuArr[0].path="/template/manage"
        // }
        this.menuList=menuArr
      }
    },
    methods: {
      menuSelect(index, indexPath){
        // console.log("menuSelect",index, indexPath)
        this.$refs.sidebarItem.menuSelect(index, indexPath)
      },

    }
  };
</script>
<style lang="scss" scoped>
.avue-sidebar{
  // background-color: #3A92F9;
  background-color: #ffffff;
  box-shadow: none;
}
.el-menu{
  //background: linear-gradient(144deg, #97C0FF 0%, #3A92F9 100%) !important;
}
</style>

